<template>
	<view class="content">
		<!-- <Loading :show="loading"></Loading> -->
		<view v-show="!loading">
		<view class="content-circle"></view>
		<view class="content-top">
		   <u-image @click="imagesBig(imgUrl( sourceData.avatar ?  sourceData.avatar : '/images/adminImg/avatar.png'))" height="150rpx" width="150rpx" shape="circle" mode="scaleToFill" :src="imgUrl( sourceData.avatar ?  sourceData.avatar : '/images/adminImg/avatar.png')"></u-image>
		   <view class="content-top-center">
			    <view class="name">{{checkField(sourceData.realName)?sourceData.realName:sourceData.nickName}}</view>
			    <view class="address">格子空间-博爱路三路36号之一5层</view>
		   </view>
		   <view class="content-top-right" style="opacity: 0.8;">
			   
		   <u-icon name="phone" size="55" color="white" style="margin-right: 20rpx;" @click="callup()"></u-icon>
		 <view class="share-view"> 
		  <u-icon name="zhuanfa"  size="55" color="white" ></u-icon>
		  <button class="button" open-type="share" ></button>
		 </view>
		   </view>
		</view>
		
		<view class="padding-common">
		<view class="content-head part-common">
			<view class="content-head-part">
				<view class="top">
					{{randomEnd(5,10)}}
					</view>
					<view class="bottom">
						从业年限
						</view>
			</view>
			<view class="border"></view>
			<view class="content-head-part">
				<view class="top">
					{{sourceData.fixtureNumber}}
					</view>
					<view class="bottom">
						拥有房源
						</view>
				
			</view>
		</view>
		</view>
		<view class="padding-common">
			<view class="qualification part-common">
				<view class="title">资质</view>
				<view><u-tag :text="'优秀经纪人'" type="success"  border-color="white"/></view>
			</view>
		</view>
		<view class="padding-common" style="margin-bottom: 150rpx;">
			 <view class="part-common">
			 	<view class="sale-title">在售房源</view>
				
				<view class="recommended-content">
					
					<navigator  v-for="(item,index) in list.data" :key="index" :url="`${item.type=='store'?'../store/StoreContent':'../buildings/BuildingsContent'}?id=${item.id}`">
				      <ListPart  class="recommended-part" :sourceDataProp="item"></ListPart> 
					<view v-if="index+1 != list.data.length">
					  <u-line ></u-line>
					</view>
				   </navigator>
				   <u-loadmore :status="list.listLoading" style="margin-bottom: 80rpx;"/>
				</view>
			 </view>
		</view>
		<footOther :telPhoneNumber="sourceData.phone"  />
		</view>
	</view>
</template>

<script>
	import ListPart from "@/components/list/ListPart_"
	import footOther from "@/components/foot/footOther"
	import {expertsSelOne} from "@/services/admins.js"
	import {housingStoreList} from "@/services/housing.js"
	import Loading from "@/components/loading/loading.vue"
	export default {
		components:{
			ListPart,
			footOther
		},
		data() {
			return {
				id:"",
				sourceData:{},
				list:{
					listLoading:'loadmore',
					data:[],
					config:{
						pageSize:5,
						page:1
					}
				},
				
				loading:true,
				
			}
		},
		onLoad(param){
			this.id = param.id
			// console.log(Math.random(5,10))
			//  console.log( Math.floor( Math.random() * 5 ) + 1 )
			this.expertsSelOneLoad()
			this.housingStoreListLoad()
			// console.log(this.id)
		},
		created() {
		},
		onReachBottom(){
			// console.log(1)
			if(this.list.listLoading != 'nomore'){
				this.list.config.page++
				this.housingStoreListLoad()
			}
			
		},
		methods: {
			async expertsSelOneLoad(){
				  this.loading = true
				  let  res =    await  expertsSelOne({id:this.id})
				  if(res.code == 200){
					  this.sourceData = res.data
					  this.sourceData.phone = Number(this.sourceData.phone?this.sourceData.phone:18664470888 )
				  }
				  this.$nextTick(()=>{
				  	this.loading = false
				  })
			},
			async housingStoreListLoad(){
				this.list.listLoading = 'loading'
				let res =  await  housingStoreList({...this.list.config,admin_id:this.id})
				
				if(res.code == 200){
					if( res.data.length > 0 ){
						 this.list.data = [...this.list.data,...res.data]
						 this.list.listLoading = 'loadmore'
					}else{
						  if(this.list.config.page > 1 )	this.list.config.page--
						  this.list.listLoading = 'nomore'
					}
				}
				console.log(this.list)
			},
			callup(){
				
				uni.makePhoneCall({
				    phoneNumber: this.sourceData.phone.toString() //仅为示例
				});
			},
			share(){
				
			}
		}
	}
</script>

<style scoped lang="less">
      .content{
		  width: 100%;
		  position: relative;
		  overflow: hidden;
		  .content-circle{
			  position: absolute;
			  top:-320rpx;
			  left:-190rpx;
			  width: 150%;
			  border-radius:100% ;
			  background: #41b3ff;
			  height: 600rpx;
			  z-index: -1;
		  }
		  
		  .content-top{
			  width: 100%;
			  // border: 1rpx solid red;  
			  padding-left: 20rpx;
			  padding-right: 20rpx;
			  display: flex;
			  height: 150rpx;
			  margin-top: 25rpx;
			  z-index: 9;
			  .content-top-center{
				  flex:1;
				  display: flex;
				  flex-direction: column;
				  // border: 1rpx solid red;
				  margin-left: 20rpx;
				  margin-right: 20rpx;
				  height: 100%;
				  justify-content: space-between;
				  .name{
				  		font-size: 35rpx;
				  		color: #ffffff;
						font-weight: bold;
						margin-top: 10rpx;
				  }
				  .address{
				  					  font-size: 28rpx;
				  					  color: #FFFFFF;
									  opacity: 0.8;
				  }
			  }
			  .share-view{
				  position: relative;
				  .button{
					  position: absolute;
					  opacity: 0;
					  top:0;
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .content-top-right{
				  display: flex;
				  height: 100%;
				  // border: 1rpx solid blue;
				  align-items: flex-start;
				 
			  }
		  }
		  .padding-common{
			  padding:0 25rpx 0 25rpx;
		  }
		  .content-head{
			 
			  height: 180rpx;
			 
			  display: flex;
			  align-items: center;
			  .border{
				  height: 40rpx;
				  border-left:1rpx solid #f1f1f1 ;
			  }
			  .content-head-part{
				  flex: 1;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-around;
				  align-items: center;
				  height: 100%;
				  padding-top: 20rpx;
				  padding-bottom: 20rpx;
				  .top{
					  font-size: 35rpx;
					  font-weight: bold;
				  }
				  .bottom{
					  font-size: 30rpx;
					  color:#c3c3c3;
				  }
			  }
		  }
		  .part-common{
			 border-radius: 30rpx;
			 background-color: white;
			 margin-top: 20rpx; 
			 width: 100%;
		  }
		  .qualification{
			 height: 200rpx;
			 display: flex;
			 flex-direction: column;
			 justify-content: space-around;
			padding: 5rpx 20rpx 10rpx 20rpx;
			 .title{
				 font-weight: bold;
				 font-size: 35rpx;
			 }
		  }
		  .sale-title{
			  font-size: 35rpx;
			  font-weight: bold;
			  padding: 30rpx 0 0 20rpx;
		  }
		  .recommended-content{
		  	width: 100%;
		  	margin-top: 30rpx;
		  	// border: 1rpx solid red;
		  	// height: 200rpx;
		  	// padding-right: 35rpx;
		  	display: flex;
		  	flex-direction: column;
			}
	  }
</style>
